<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen"
	href="css/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="css/ui.jqgrid.css" />


<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/grid.locale-es.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>

<script type="text/javascript">
	$(function() {
		$("#list").jqGrid({
			url : "example.php",
			datatype : "xml",
			mtype : "GET",
			colNames : [ "Inv No", "Date", "Amount", "Tax", "Total", "Notes" ],
			colModel : [ {
				name : "invid",
				width : 55
			}, {
				name : "invdate",
				width : 90
			}, {
				name : "amount",
				width : 80,
				align : "right"
			}, {
				name : "tax",
				width : 80,
				align : "right"
			}, {
				name : "total",
				width : 80,
				align : "right"
			}, {
				name : "note",
				width : 250,
				sortable : false
			} ],
			pager : "#pager",
			//autowidth: true,
			rowNum : 20,
			rowList : [ 10, 20, 30 ],
			pager : jQuery('#pager'),
			sortname : "invid",
			sortorder : "desc",
			viewrecords : true,
			gridview : true,
			autoencode : true,
			rownumbers : true,
			caption : "Vista de elementos...",
			altRows : true
		}).navGrid('#pager', {
			edit : false,
			add : false,
			del : false,
			view : false
		});

	});
</script>

</head>
<body>
	<table id="list">
		<tr>
			<td></td>
		</tr>
	</table>
	<div id="pager"></div>
</body>
</html>
